<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { Chart } from "@antv/g2";

let chart;

onMounted(() => {
  chart = new Chart({
    container,
    autoFit: true,
  });
  chart.title('区间条形图')
    .interval().data([
    { month: "Jan.", profit: 387264, start: 0, end: 387264 },
    { month: "Feb.", profit: 772096, start: 387264, end: 1159360 },
    { month: "Mar.", profit: 638075, start: 1159360, end: 1797435 },
    { month: "Apr.", profit: -211386, start: 1797435, end: 1586049 },
    { month: "May", profit: -138135, start: 1586049, end: 1447914 },
    { month: "Jun", profit: -267238, start: 1447914, end: 1180676 },
    { month: "Jul.", profit: 431406, start: 1180676, end: 1612082 },
    { month: "Aug.", profit: 363018, start: 1612082, end: 1975100 },
    { month: "Sep.", profit: -224638, start: 1975100, end: 1750462 },
    { month: "Oct.", profit: -299867, start: 1750462, end: 1450595 },
    { month: "Nov.", profit: 607365, start: 1450595, end: 2057960 },
    { month: "Dec.", profit: 1106986, start: 2057960, end: 3164946 },
    { month: "Total", start: 0, end: 3164946 },
  ])
  .encode('x', 'month')
  .encode('y', ['start', 'end'])
  .encode('color', (d) => {
    return d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease'
  })
  .axis('y', {labelFormatter: '~s'})

  chart.render();
});

// 销毁
onUnmounted(() => {
  chart.destroy();
  chart = null;
});
</script>

<style lang="less" scoped>
#container {
  width: 800px;
  height: 400px;
}
</style>
